<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <LiSt v-for="i in 5" :key="i"></LiSt>
    </van-list>
  </van-pull-refresh>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import LiSt from './LiSt.vue'
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const onLoad = () => {
  refreshing.value = false
  loading.value = false
}
const onRefresh = () => {
  // 清空列表数据
  finished.value = false

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  onLoad()
}
</script>

<style lang="scss" scoped>
.van-list {
  background: #ececec;
  padding: 10px;
}
</style>
